import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
// import store from '../redux/store'
import {connect} from 'react-redux'
 function City (props) {
  const [list] = useState(["北京", "上海", "广州", "深圳"])
  let navigator = useNavigate()
  return (
    <div>
      City
      <ul>
        {
          list.map(item => <li key={item} onClick={() => {
            // store.dispatch({
            //   type: "change-city",
            //   payload: item
            // })
            props.change(item)
            navigator(`/cinemas`)
          }}>{item}</li>)
        }
      </ul>
    </div>
  )
}
const mapDispatchToProps={
  change(item){
    return{
      type: "change-city",
      payload: item
    }
  }
}
export default connect(null,mapDispatchToProps)(City)